<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>果然FruitC</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link href="${ctx }/shop/css/amazeui.min.css" rel="stylesheet" type="text/css" />
		<link href="${ctx }/shop/css/style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<header data-am-widget="header" class="am-header am-header-default sq-head ">
			<div class="am-header-left am-header-nav">
				<!--<a href="javascript:history.back()" class="">
					<i class="am-icon-chevron-left"></i>
				</a>-->
			</div>
			<h1 class="am-header-title">
  	            <a href="" class="">购物车</a>
            </h1>
            <c:if test="${gifts.size()>0 }">
           	 <p id="edit" style="position: absolute;top: 0px;right: 10px;">编辑</p>
            </c:if>
	    </header>
	    <div style="height: 49px;"></div>
	    <!--购物车空的状态-->
	    <c:choose>
	    	<c:when test="${gifts.size()==0 }">
	    		 <div class="login-logo">
			    	<img src="${ctx }/shop/images/care.png">
			    	<p>亲、您的购物车还是空空的哦，快去装满它!</p>
			    	<a href="${ctx}/shop" class="goshopping">前去逛逛</a>
			    </div>
	    	</c:when>
	    	<c:otherwise>
		    	<ul class="shopcart-list">
			    	<c:forEach items="${gifts }" var="record">
		    			<li id ="${record.id}">
				    		<label class="am-checkbox am-warning">
			                 <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
			                </label>
			                <a href="${ctx }/detail?id=${record.id}"><img src="${record.img_ }" class="shop-pic" /></a>
			                <div class="shop-list-mid">
			                	<div class="tit"><a href="detail.html">${record.name_ }</a></div>
			                	<b class="shop-list-price">￥<span>${record.price_ }</span> </b>
			                </div>
			                <div class="list-cart1">
				                <div class="d-stock">
						                <a class="decrease">-</a>
						                <input readonly style="width:40px" class="text_box" name="${record.shopcarid}" type="text" value="${record.count_ }">
						                <a class="increase">+</a>
				                </div>
			                </div>
				              <p class="del1" onclick ="del(this,'${record.shopcarid}')" style="display:none;position:absolute;bottom:10px;right:10px;color:#cb2527;font-size:1.6rem;">删除</p>
				    	</li>
			    	</c:forEach>
			    	<div style="height: 10px; background: #eee;"></div>
			    </ul>
			   
	    	</c:otherwise>
	    </c:choose>
	    <div class="shop-fix">
	    	<form id="form" action="${ctx}/makeOrder" method="post">
	     		<input id="vals" name = "data" type="hidden"/>
	     		<input id="p" name = "total" type="hidden"/>
		    </form>
	    	<label class="am-checkbox am-warning">
               <input type="checkbox" checked="checked" onchange = "allselect(this)"data-am-ucheck checked>
           		 <a style="color:black">全选</a>
            </label>
            <a href="javascript:finish()" class="js-btn">去结算</a>
            <div class="js-text">
            	<P>合计：<b>￥<span id="price">2.40</span></b></P>
            	<p class="js-car">免费配送</p>
            </div>
	    </div>
	    
<!--底部-->
 <div style="height: 55px;"></div>
 <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id="">
      <ul style="background: #d4d0d0;"class="am-navbar-nav am-cf am-avg-sm-5">   
          <li>
<!--            对于魅族破手机竟然要加个问号 不懂 -->
            <a href="${ctx }/shop?2" >
                <span class="am-icon-home"></span>
                <span class="am-navbar-label">首页</span>
            </a>
          </li>
          <li>
            <a class="curr">
                <span class="am-icon-shopping-cart"></span>
                <span class="am-navbar-label">购物车</span>
            </a>
          </li>
 
          <li>
            <a href="${ctx}/person" class="">
                <span class="am-icon-user"></span>
                <span class="am-navbar-label">我的</span>
            </a>
          </li>
      </ul>
</div>
 <script src="${ctx }/shop/js/jquery-1.10.2.min.js"></script>
  <script src="${ctx }/shop/js/util.js"></script>
<script>
	var empty = "${gifts.size()}";
	function allselect(obj){
		if(obj.checked){
			$(".shopcart-list input[type='checkbox']").prop("checked",true);
		}else{
			$(".shopcart-list input[type='checkbox']").prop("checked",false);
		}
		update_item();
	}
	
	function finish(){
		if(empty == "0"){
			hit_box_one('您的购物车没有商品哦','','','我知道啦','');
			return;
		}
		var objs = [];
		$(".shopcart-list input[type='checkbox']").each(function(){
			if(this.checked){
				var li = $(this).parent().parent();
				var giftid = li.attr("id");
				var input = $(".d-stock input",li);
				var num = input.val();
				var shopcarid = input.attr("name");
				var obj = {
						id:giftid,
						count : num,
						shopcarid : shopcarid
				};
				objs.push(obj);
			}
		});
		if(objs.length == 0){
				hit_box_one('您没有勾选商品哦','','','我知道啦','');
				return;
		}
		$("#vals").val(JSON.stringify(objs));
		$("#p").val($("#price").text());
		$("#form")[0].submit();
		
	}
	
	function del(dom,del){
		sendReq("${ctx}/delShopCar",{id:del},function(data){
			$(dom).parent().remove();
			update_item();
			if($(".shopcart-list li").length == 0){
				empty = "0";
				var html = '<div class="login-logo">\
							    	<img src="${ctx }/shop/images/care.png">\
						    	<p>亲、您的购物车还是空空的哦，快去装满它!</p>\
						    	<a href="${ctx}/shop" class="goshopping">前去逛逛</a>\
						    </div>'
				$html = $(html);
				$(".shopcart-list").before($html);
				$(".shopcart-list").hide();
			}
		})
	}

	$(document).ready(function(){
		update_item();
		$(".shopcart-list input[type='checkbox']").click(function(){
			update_item();
		});
		$("#edit").click(function(){
			var text = $(this).text();
			if(text == "编辑"){
				$(".list-cart1").hide();
				$(".del1").show();
				$(this).text("完成");
			}else{
				$(".list-cart1").show();
				$(".del1").hide();
				$(this).text("编辑");
			}
		});
	})
	function update_item(){
		var total = 0;
		$(".shopcart-list input[type='checkbox']").each(function(){
			if(this.checked){
				var li = $(this).parent().parent();
				var num = $(".d-stock input",li).val();
				var price = $(".shop-list-price span",li).text();
				total +=num*price;
			}
		});
		total = total.toFixed(2);
		$("#price").text(total);
	}

	//购物数量加减
	$(function(){
		$('.increase').click(function(){
			var self = $(this);
			var current_num = parseInt(self.siblings('input').val());
			current_num += 1;
			self.siblings('input').val(current_num);
			update_item();
			updateNum(self);
		})		
		$('.decrease').click(function(){
			var self = $(this);
			var current_num = parseInt(self.siblings('input').val());
			if(current_num > 1){
				current_num -= 1;
				self.siblings('input').val(current_num);
				update_item();
				updateNum(self);
			}
		})
	})
	
	var timer = null;
	//更新购物车
	function updateNum(self){
		if(timer != null){
			clearTimeout(timer);
		}
		timer = setTimeout(changeNum.bind(self),500)
	}
	
	function changeNum(){
		var self = this;
		var input = self.siblings('input');
		var val = $(input).val();
		var id = $(input).attr("name");
		$.ajax({
			url : "${ctx}/updateNum",
			data : {count:val,id:id},
			dataType : "json"
		});
	}
	
</script>

	</body>
<%@include file="../common/jsticket.jsp"%><!--静态包含-->  
</html>
